<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    h1 {
      margin-top: 0;
      font-weight: bold;
    }

    .register {
      width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    .register form {
      width: 100%;
      margin-top: 20px;
    }

    .register button {
      width: 100%;
    }

    .register footer {
      width: 100%;
      box-sizing: border-box;
      margin-top: 20px;
      padding: 0 5rem;
      display: flex;
      justify-content: space-evenly;
    }

    .input {
      margin-bottom: 30px;
    }

    .register .tip {
      position: absolute;
      bottom: 0;
      transform: translateY(100%);
      color: var(--el-color-danger)
    }

    .register button {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="App">
    <div class="register">
      <h1>注册</h1>
      <el-form :model="registerForm" ref="registerForm" :rules="rules">
        <!-- 用户名 -->
        <el-form-item class="input" prop="userName">
          <el-input type="text" placeholder="请输入用户名" v-model="registerForm.userName" class="w-50 m-2" size="large">
          </el-input>
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item class="input" prop="email">
          <el-input type="email" placeholder="请输入邮箱" v-model="registerForm.email" class="w-50 m-2" size="large">
          </el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item class="input" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="registerForm.password" class="w-50 m-2" size="large">
          </el-input>
        </el-form-item>

        <!-- 二次密码 -->
        <el-form-item class="input" prop="secondPwd">
          <el-input type="password" placeholder="请重复输入密码" v-model="registerForm.secondPwd" class="w-50 m-2"
            size="large"></el-input>
        </el-form-item>

        <!-- 验证码 -->
        <el-form-item class="input" prop="pin">
          <el-input type="text" placeholder="请输入验证码" v-model="registerForm.pin" class="w-50 m-2" size="large">
          </el-input>
        </el-form-item>
      </el-form>

      <el-button size="large" @click="getPin">获取验证码</el-button>
      <i></i>
      <el-button type="primary" size="large" @click="register">注册</el-button>
    </div>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          registerForm: {
            userName: '',
            email: '',
            password: '',
            secondPwd: '',
            pin: '',
          },
          rules: {
            userName: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { max: 10, message: '用户名不能超过 10 位', trigger: 'blur' },
              {
                pattern: new RegExp(/^[\p{sc=Han}\w\d]/u),
                message: '请输入合法用户名，可含汉字、字母、数字',
                trigger: 'blur'
              },
            ],
            email: [
              { type: 'email', required: true, message: '请输入正确的邮箱', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { max: 20, message: '密码不能超过20位', trigger: 'blur' },
              {
                pattern: new RegExp(/^[a-zA-Z0-9!@#$%^~&*)(+=._-]/),
                message: '密码只能含字母、数字或特殊字符',
                trigger: 'blur'
              }
            ],
            secondPwd: [
              { validator: this.checkSecondPwd, trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        // 校验二次密码
        checkSecondPwd(rule, value, callback) {
          if (value === '') callback(new Error("请再次输入密码"))
          else if (value != this.registerForm.password) callback(new Error("两次密码输入不一致"))
          else callback()
        },
        // 获取验证码
        async getPin() {
          const isVaild = await this.$refs.registerForm.validateField('email')
            .then(() => true)
            .catch(() => false)

          if (!isVaild) return
          const response = await fetch("获取验证码的url", {
            method: "POST",
            body: JSON.stringify({ email: this.registerForm.email })
          })

          const res = await response.json()
          console.log(res)
        },
        // 注册
        async register() {
          const isVaild = await this.$refs.registerForm.validate()
            .then(() => true)
            .catch(() => false)

          if (!isVaild) return
          const { userName, password, email, pin } = this.registerForm
          const data = { userName, password, email, pin }
          const response = await fetch("/user/register", {
            method: "POST",
            body: JSON.stringify(data)
          })

          const res = await response.json()
          console.log(res)
        }
      },
    })

    app.use(ElementPlus)
    app.mount('#App')

  </script>
</body>

</html>